<template>
  <div class="charts" ref="charts"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name:'',
  mounted(){
    // 初始化echarts实例
    let lineCharts = echarts.init(this.$refs.charts);
    //配置数据
    lineCharts.setOption({
      xAxis:{
        // 隐藏x轴
        show:false,
        type:'category'
      },
      yAxis:{
        // 隐藏y轴
        show:false
      },
      // 系列
      series:[
        {
          type:'line',
          data:[10,60,33,8,9,50,19,44],
          // 拐点的样式设置
          itemStyle:{
            opacity:0
          },
          //线条的样式
          lineStyle:{
            color:'purple'
          },
          // 填充颜色的设置
          areaStyle:{
            color:{
              type:'linear',
              x:0,
              y:0,
              x2:0,
              y2:1,
              colorStops:[
                {
                  offset:0,
                  color:"purple" // 0% 处的颜色
                },
                {
                  offset:1,
                  color:"#fff" //为100% 处的颜色
                }
              ],
              global:false,
            }
          },
          smooth: true
        }
      ],
      // 布局的调试
      grid:{
        left:0,
        top:0,
        right:0,
        bottom:0
      }
    })
  }
}
</script>

<style scoped>
  .charts{
    width: 100%;
    height: 100%;
  }
</style>